<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 链接和图像</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
        .image-container {
            margin: 20px 0;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 10px 0;
            border: 1px solid #ddd;
        }
        figure {
            margin: 20px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: center;
        }
        figcaption {
            margin-top: 10px;
            font-style: italic;
            color: #666;
        }
    </style>
</head>
<body>
    <nav>
        <a href="html5-basic-structure.html">基础结构</a>
        <a href="html5-text-tags.html">文本标签</a>
        <a href="html5-links-images.html">链接和图像</a>
        <a href="html5-lists.html">列表</a>
        <a href="html5-tables.html">表格</a>
        <a href="html5-forms.html">表单</a>
        <a href="html5-semantic-tags.html">语义化标签</a>
        <a href="html5-multimedia.html">多媒体标签</a>
    </nav>

    <h1>HTML5 链接和图像</h1>
    
    <section>
        <h2>链接</h2>
        <div class="example">
            <h3>基本链接</h3>
            <div class="code">
                &lt;!-- 基本链接 --&gt;<br>
                &lt;a href="https://www.example.com"&gt;访问示例网站&lt;/a&gt;
            </div>
            
            <div class="preview">
                <a href="https://www.example.com">访问示例网站</a>
            </div>
        </div>
        
        <div class="example">
            <h3>新窗口打开链接</h3>
            <div class="code">
                &lt;!-- 新窗口打开链接 --&gt;<br>
                &lt;a href="https://www.example.com" target="_blank"&gt;在新窗口打开&lt;/a&gt;
            </div>
            
            <div class="preview">
                <a href="https://www.example.com" target="_blank">在新窗口打开</a>
            </div>
        </div>
        
        <div class="example">
            <h3>页面内部链接</h3>
            <div class="code">
                &lt;!-- 页面内部链接 --&gt;<br>
                &lt;a href="#section1"&gt;跳转到第一部分&lt;/a&gt;<br>
                &lt;h2 id="section1"&gt;第一部分&lt;/h2&gt;
            </div>
            
            <div class="preview">
                <a href="#section1">跳转到第一部分</a>
                <div style="height: 20px;"></div>
                <h2 id="section1" style="border-top: 1px solid #ddd; padding-top: 10px;">第一部分</h2>
                <p>这是页面的第一部分内容。</p>
            </div>
        </div>
        
        <div class="example">
            <h3>特殊链接类型</h3>
            <div class="code">
                &lt;!-- 电子邮件链接 --&gt;<br>
                &lt;a href="mailto:example@example.com"&gt;发送邮件&lt;/a&gt;<br><br>
                
                &lt;!-- 电话链接 --&gt;<br>
                &lt;a href="tel:+123456789"&gt;拨打电话&lt;/a&gt;<br><br>
                
                &lt;!-- 下载链接 --&gt;<br>
                &lt;a href="files/document.pdf" download&gt;下载 PDF&lt;/a&gt;
            </div>
            
            <div class="preview">
                <p><a href="mailto:example@example.com">发送邮件</a></p>
                <p><a href="tel:+123456789">拨打电话</a></p>
                <p><a href="#" onclick="alert('这只是一个示例，没有实际文件可下载'); return false;">下载 PDF</a></p>
            </div>
        </div>
        
        <div class="note">
            <h3>链接属性说明：</h3>
            <ul>
                <li><strong>href</strong> - 指定链接的目标 URL</li>
                <li><strong>target</strong> - 指定链接的打开方式
                    <ul>
                        <li><code>_blank</code> - 在新窗口或标签页中打开</li>
                        <li><code>_self</code> - 在当前窗口打开（默认）</li>
                        <li><code>_parent</code> - 在父框架中打开</li>
                        <li><code>_top</code> - 在整个窗口中打开</li>
                    </ul>
                </li>
                <li><strong>download</strong> - 提示浏览器下载而不是导航</li>
                <li><strong>rel</strong> - 指定当前文档与链接文档的关系</li>
                <li><strong>title</strong> - 提供链接的额外信息，鼠标悬停时显示</li>
            </ul>
        </div>
    </section>
    
    <section>
        <h2>图像</h2>
        <div class="example">
            <h3>基本图像</h3>
            <div class="code">
                &lt;!-- 基本图像 --&gt;<br>
                &lt;img src="images/photo.jpg" alt="描述性文本"&gt;
            </div>
            
            <div class="preview">
                <div class="image-container">
                    <!-- 使用占位图像 -->
                    <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22150%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20150%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1%22%3E%3Crect%20width%3D%22200%22%20height%3D%22150%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%2279.5%22%3E示例图像%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="描述性文本">
                </div>
                <p><strong>注意：</strong> 这里显示的是占位图像。在实际使用中，您需要提供有效的图像路径。</p>
            </div>
        </div>
        
        <div class="example">
            <h3>设置宽度和高度</h3>
            <div class="code">
                &lt;!-- 设置宽度和高度 --&gt;<br>
                &lt;img src="images/photo.jpg" alt="描述性文本" width="300" height="200"&gt;
            </div>
            
            <div class="preview">
                <div class="image-container">
                    <!-- 使用占位图像 -->
                    <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22300%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_2%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A15pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_2%22%3E%3Crect%20width%3D%22300%22%20height%3D%22200%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22110.5%22%20y%3D%22107.5%22%3E300x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="描述性文本" width="300" height="200">
                </div>
            </div>
        </div>
        
        <div class="example">
            <h3>响应式图像</h3>
            <div class="code">
                &lt;!-- 响应式图像 --&gt;<br>
                &lt;img src="images/photo.jpg" alt="描述性文本" style="max-width:100%; height:auto;"&gt;
            </div>
            
            <div class="preview">
                <div class="image-container">
                    <!-- 使用占位图像 -->
                    <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_3%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A20pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_3%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22207.7%22%3E响应式图像（调整浏览器窗口大小查看效果）%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="描述性文本" style="max-width:100%; height:auto;">
                </div>
            </div>
        </div>
        
        <div class="example">
            <h3>图片带有说明</h3>
            <div class="code">
                &lt;!-- 图片带有说明 --&gt;<br>
                &lt;figure&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="images/photo.jpg" alt="风景照片"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;figcaption&gt;美丽的山景&lt;/figcaption&gt;<br>
                &lt;/figure&gt;
            </div>
            
            <div class="preview">
                <figure>
                    <!-- 使用占位图像 -->
                    <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22400%22%20height%3D%22300%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_4%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A20pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_4%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22148.953125%22%20y%3D%22157.7%22%3E风景照片%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="风景照片">
                    <figcaption>美丽的山景</figcaption>
                </figure>
            </div>
        </div>
        
        <div class="example">
            <h3>图片带有链接</h3>
            <div class="code">
                &lt;!-- 图片带有链接 --&gt;<br>
                &lt;a href="https://www.example.com"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="images/logo.png" alt="Logo"&gt;<br>
                &lt;/a&gt;
            </div>
            
            <div class="preview">
                <a href="https://www.example.com">
                    <!-- 使用占位图像 -->
                    <img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22100%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_5%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Abold%3Bfont-family%3AArial%2C%20Helvetica%2C%20Open%20Sans%2C%20sans-serif%2C%20monospace%3Bfont-size%3A15pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_5%22%3E%3Crect%20width%3D%22200%22%20height%3D%22100%22%20fill%3D%22%23EEEEEE%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2272.5%22%20y%3D%2257%22%3ELOGO%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Logo">
                </a>
                <p><small>点击上方图像访问示例网站</small></p>
            </div>
        </div>
    </section>
    
    <section>
        <h2>响应式图片</h2>
        <div class="example">
            <h3>使用 srcset 属性</h3>
            <div class="code">
                &lt;!-- 根据设备选择不同分辨率的图片 --&gt;<br>
                &lt;img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"<br>
                &nbsp;&nbsp;&nbsp;&nbsp; sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"<br>
                &nbsp;&nbsp;&nbsp;&nbsp; src="medium.jpg" alt="响应式图片"&gt;
            </div>
            
            <div class="note">
                <p><strong>说明：</strong></p>
                <ul>
                    <li><strong>srcset</strong> 属性指定不同尺寸的图像及其宽度（以像素为单位，用 w 表示）</li>
                    <li><strong>sizes</strong> 属性告诉浏览器在不同条件下使用哪个尺寸的图像</li>
                    <li><strong>src</strong> 属性作为不支持 srcset 的浏览器的后备选项</li>
                </ul>
            </div>
        </div>
        
        <div class="example">
            <h3>使用 picture 元素</h3>
            <div class="code">
                &lt;!-- 根据媒体查询提供不同图片 --&gt;<br>
                &lt;picture&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;source media="(max-width: 600px)" srcset="small.jpg"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;source media="(max-width: 1200px)" srcset="medium.jpg"&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="large.jpg" alt="响应式图片"&gt;<br>
                &lt;/picture&gt;
            </div>
            
            <div class="note">
                <p><strong>说明：</strong></p>
                <ul>
                    <li><strong>&lt;picture&gt;</strong> 元素提供更灵活的响应式图像解决方案</li>
                    <li><strong>&lt;source&gt;</strong> 元素指定不同的图像源和媒体条件</li>
                    <li><strong>&lt;img&gt;</strong> 元素作为不支持 picture 元素的浏览器的后备选项</li>
                    <li>浏览器会选择第一个匹配的 source 元素</li>
                </ul>
            </div>
        </div>
    </section>
    
    <section>
        <h2>链接和图像的最佳实践</h2>
        <ul>
            <li>始终为图像提供有意义的 alt 属性，以提高可访问性</li>
            <li>使用响应式图像技术，确保在不同设备上的最佳显示效果</li>
            <li>指定图像的宽度和高度，以减少页面加载时的布局偏移</li>
            <li>为链接提供清晰的描述，避免使用"点击这里"等不明确的文本</li>
            <li>使用适当的链接类型（mailto:, tel:）来增强用户体验</li>
            <li>考虑使用 target="_blank" 时添加 rel="noopener noreferrer" 以提高安全性</li>
            <li>优化图像文件大小，以提高页面加载速度</li>
            <li>使用 figure 和 figcaption 为图像提供上下文和说明</li>
        </ul>
    </section>
    
    <footer>
        <p>&copy; 2023 HTML5 学习指南。保留所有权利。</p>
    </footer>
</body>
</html>